<template>
  <div class="hello">
    <codemirror :value="code" :options="cmOptions"></codemirror>
  </div>
</template>

<script>
import {codemirror} from "vue-codemirror"
export default {
  name: 'CodeMirror',
  components:{
    codemirror
  },
  data(){
    return {
      code:`<?xml version-"1.0” encoding-"UTF-8”?>
<flowctrl isctrl = "1">
	<resource>
		<resgroup id="id1" name=global" type="absolute" flowtype="all" flowtypedesc="全局">
				<resmember id="global" quantity="180" strategy="default" />
		</resgroup>
		<resgroup id="id2" name="msgHeadsys_tx_code" type="absolute">
				<resmember id="A03713201" quantity="10" strategy="default”/>
				<resmember id="A03713202" quantity="20" strategy="default”/>
		</resgroup>
	</resgroup>
	<strategy>
		<stgymember name="default" classname="com.ccb.openframework.flowctrl.strategy.DefaultFlowStrategy”/>
	</strategy>
</flowctrl>`,
      cmOptions:{
        mode:"text/javascript",
        theme:"base16-dark"
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
